<!-- 静态路由页面 -->
<template>
  <div class="app-container">
    <h1 size="25px">基础信息</h1>
    <el-form label-width="400px">
      <el-form-item label="上传新头像">
        <el-upload
          class="avatar-uploader"
          :action="BASE_API + '/eduoss/fileoss'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="user.avatar" :src="user.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="登陆密码：">
        <el-input
          placeholder="重置密码"
          v-model="user.password"
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item label="昵称："
        ><el-input
          v-model="user.nickname"
          placeholder="取个有趣的昵称喵~"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号："
        ><el-input
          v-model="user.mobile"
          placeholder="请输入11位手机号"
        ></el-input>
      </el-form-item>

      <el-form-item label="性别：">
        <el-radio v-model="user.sex" label="1">男</el-radio>
        <el-radio v-model="user.sex" label="2">女</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>




<script>
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import userApi from "@/api/login";
import cookie from "js-cookie";
export default {
  data() {
    return {
      user: {
        avatar: "",
        nickname: "",
        sex: "1",
        mobile: "",
        password: "",
        id: "",
      },
      BASE_API: "http://localhost:8888", // 接口API地址
    };
  },
  created() {
    // 检查是否登录
    if (cookie.get("loginInfo") == null) {
      this.$message({
        type: "info",
        message: "您尚未登录!",
      });
    } else {
      // 填充数据
      this.initUserInfo();
    }
  },
  methods: {
    onSubmit() {
      this.$confirm("您确定要修改自己的个人信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          userApi.updateUserInfo(this.user).then(response=>{
            console.log(response.data)
          })
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          // 重新刷新用户数据
          this.initUserInfo();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    handleAvatarSuccess(res, file) {
      this.user.avatar = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isJPG && isLt2M;
    },
    initUserInfo() {
      userApi.getLoginInfo().then((response) => {
        this.user = response.data.data.ucenterMember;
        this.user.password = "";
        this.user.sex = this.user.sex.toString();
      });
    },
    update() {
      userApi.updateUserInfo(this.user).then((response) => {
        return response.data.success;
      });
    },
  },
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
